<template>
  <view 
    class="pen_item" 
    v-for="(item, index) in penData" 
    :class="{'choose_border': penIndex===index}" 
    
    :key="item.deviceId" 
    @click="clickChoose(index, item)"
    >
      <view>
          <image class="default_pen" src="../images/default_pen.png" />
      </view>
      <view class="penItem_center2">
          <text class="pen_text">{{item.nickName}}</text>
          <!-- <text class="isConnect">已连接 ｜ {{item.electricity}}%电量</text> -->
          <text class="isConnect">
            <text v-if="item.isConnect">已连接</text>
            <text v-if="item.isHave_dian"> ｜{{ item.dian }} %电量</text> 
          </text>
      </view>
      <view v-show="penIndex === index" class="allreay_choose">已选</view>
  </view>
  </template>
  
  <script setup>
  import {ref, watch} from 'vue'
  
  let props = defineProps(['penData', 'dindex'])
  const emit = defineEmits(['connect','clickPen'])
  

  let penIndex = ref(0)

  watch(() => props.dindex, value => {
    // console.log('watch:', value)
    penIndex.value = value
    // console.log('penIndex.value：：：：：：：：：：', penIndex.value)
  })

  penIndex.value = props.dindex
  function clickChoose(index, item) {
    penIndex.value = index
    emit('clickPen', item)
  }
  </script>
  
  <style>
    .pen_item {
      padding: 40px 32px;
      border-radius: 20px;
      overflow: hidden;
      background-color: #FFF;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      position: relative;
      border: 4px solid #FFF;
    }
    .default_pen{
      width: 136px;
      height: 136px;
    }
    .connect_btn {
      width: 128px;
      height: 80px;
      line-height: 80px;
      font-size: 30px;
      color: #FFF;
      text-align: center;
      background-color: #956F31;
      border-radius: 50px;
      display: inline-block;
    }
  
  
    .penItem_center2{
      width: 85%;
      height: 150px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-left: 20px;
      box-sizing: border-box;
    }
  
    .pen_text {
      width: 100%;
      font-family: 'siyuan';
      font-size: 40px;
      font-weight: bold;
      text-align: left;
      align-self:self-start;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: block;
      
    }
  
    .isConnect {
      align-self: flex-start;
      color: #816747;
    }

    .allreay_choose {
      width: 128px;
      height: 64px;
      line-height: 64px;
      text-align: center;
      font-size: 30px;
      color: #FFF;
      background-color: #956F31;
      border-top-left-radius: 30px;
      position: absolute;
      right: 0;
      bottom: 0;
    }

    .choose_border {
      border: 4px solid #956F31;
    }
  
  
  
    
  
  </style>